<template>
  <div class="container">
    <h1 class="title">套餐列表</h1>
    <table class="table">
      <thead>
      <tr>
        <th>Package ID</th>
        
        <th>套餐描述</th>
        <th>套餐名称</th>
        <th>价格</th>
        <th>流量</th>
        <th>通话时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="pkg in packages" :key="pkg.packageId">
        <td>{{ pkg.packageId }}</td>
        
        <td>{{ pkg.packageDescription }}</td>
        <td>{{ pkg.packageName }}</td>
        <td>{{ pkg.packagePrice }}</td>
        <td>{{ pkg.packageData }}</td>
        <td>{{ pkg.packageCallTime }}</td>
        <td>
          <button @click="orderPackage(pkg)" class="order-button">订购</button>
        </td>
      </tr>
      </tbody>
      <!-- 查看我的套餐按钮放在列表最下方 -->
      <tfoot>
      <tr>
        <td colspan="8">
          <button @click="viewMyPackage" class="view-package-button">查看我的套餐</button>
        </td>
      </tr>
      </tfoot>
    </table>

    <!-- 小窗口用于显示套餐详情 -->
    <div v-if="showPackageDetails" class="package-details-modal">
      <div class="modal-content">
        <span class="close-button" @click="closePackageDetails">&times;</span>
        <h2>我的套餐详情</h2>
        <p>套餐ID: {{ currentPackage.packageId }}</p>
        <p>余额: {{ currentPackage.balance }}</p>
        <p>数据余额: {{ currentPackage.dataBalance }}</p>
        <p>通话时间余额: {{ currentPackage.callTimeBalance }}</p>
        <!-- 添加退订套餐按钮 -->
        <button @click="unsubscribePackage" class="unsubscribe-button">退订套餐</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const packages = ref([]);
const userToken = ref(localStorage.getItem('userToken'));
const phoneNumber = ref('');
const showPackageDetails = ref(false);
const currentPackage = ref({});
const banStatus=ref('');
const fetchPackages = async () => {
  try {
    const response = await axios.get('http://localhost:8088/api/packages');
    packages.value = response.data;
  } catch (error) {
    console.error('Error fetching packages:', error);
  }
};

const orderPackage = async (pkg) => {
  if (!userToken.value) {
    alert('请登录后进行操作！');
    return;
  }
  if (!phoneNumber.value) {
    alert('无法获取您的电话号码，请确保您已登录！');
    return;
  }
  // 首先获取用户信息，包括banStatus
  await fetchUserInfo();
  if (banStatus.value === '1') {
    alert('您的账号已被禁止订购套餐，请联系客服！');
    return;
  }
  try {
    const payload = {
      phoneNumber: phoneNumber.value,
      Package_ID: pkg.packageId
    };
    await axios.put('http://localhost:8088/api/package', payload, {
      headers: {
        'Authorization': 'Bearer ' + userToken.value
      }
    });
    alert(`您已成功订购套餐: ${pkg.packageName}`);
  } catch (error) {
    console.error('Error ordering package:', error);
    alert('订购失败，请稍后再试。');
  }
};
const unsubscribePackage = async () => {
  if (!userToken.value) {
    alert('请登录后进行操作！');
    return;
  }
  if (!phoneNumber.value) {
    alert('无法获取您的电话号码，请确保您已登录！');
    return;
  }
  try {
    await axios.put('http://localhost:8088/api/businessInformation/' + phoneNumber.value + '/updatePackageID', {}, {
      headers: {
        'Authorization': 'Bearer ' + userToken.value
      }
    });
    alert('套餐已退订！');
    showPackageDetails.value = false;
    await fetchPackages(); // 重新加载套餐列表
  } catch (error) {
    console.error('Error unsubscribing package:', error);
    alert('退订失败，请稍后再试。');
  }
};
const viewMyPackage = async () => {
  try {
    const response = await axios.get(`http://localhost:8088/business-information/businessInformation/${phoneNumber.value}`);
    currentPackage.value = response.data;
    showPackageDetails.value = true;
  } catch (error) {
    console.error('Error viewing my package:', error);
    alert('查看套餐失败，请稍后再试。');
  }
};

const closePackageDetails = () => {
  showPackageDetails.value = false;
};

const fetchUserInfo = async () => {
  try {
    const response = await axios.get('http://localhost:8081/users/info', {
      headers: {
        'Authorization': 'Bearer ' + userToken.value
      }
    });
    phoneNumber.value = response.data.phoneNumber;
    banStatus.value=response.data.banStatus;
  } catch (error) {
    console.error("Error fetching user info:", error);
  }
};

onMounted(async () => {
  await fetchPackages();
  await fetchUserInfo();
});
</script>

<style scoped>
/* 基本页面布局 */
.container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.title {
  text-align: center;
  font-size: 2em;
  margin-bottom: 20px;
  color: #333;
}

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid #ddd;
}

/* 表头样式 */
th {
  background-color: #4CAF50;
  color: white;
  font-size: 1.1em;
}

/* 表格行的交替背景色 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #e1f5e1; /* 悬停时的背景色 */
}

/* 图片样式 */
.package-image {
  width: 100px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package-image:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* 按钮样式 */
.order-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 15px;
  font-size: 1em;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.order-button:hover {
  background-color: #45a049;
}

/* 响应式设计 */
@media (max-width: 768px) {
  table {
    font-size: 14px;
  }

  th, td {
    padding: 8px;
  }

  .package-image {
    width: 80px;
  }
}
.view-package-button {
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  width: 100%; /* 使按钮宽度填满表格 */
  text-align: center; /* 使文本居中 */
}

/* 小窗口样式 */
.package-details-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
  max-width: 400px;
}

.close-button {
  float: right;
  cursor: pointer;
}
</style>